<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>答案管理</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" id="value" style="width: 330px" name="value" lay-verify="required" placeholder="请输入题目名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>
</form>

<table id="answerTable" lay-filter="answerTable"></table>


<!-- 编辑页面开始 -->
<form class="layui-form" id="amendAnswerForm" lay-filter="amendAnswerForm" style="display: none;padding: 20px 55px 0px 0px">
    <input type="hidden" id="id" name="id" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">题目名称</label>
        <div class="layui-input-block">
            <input type="text"  name="questionTitle" lay-verify="required" readonly  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="radio" id="optionA" name="answer" value="A" title="选项A">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="radio" id="optionB" name="answer" value="B" title="选项B">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="radio" id="optionC" name="answer" value="C" title="选项C">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="radio" id="optionD" name="answer" value="D" title="选项D">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit  lay-filter="amendAnswerSubmit">确认编辑</button>
            <button type="button"  id="closeAmendAnswer" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 编辑页面结束 -->



<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">


    layui.use(['table','form','layer'],function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        table.render({
            elem:'#answerTable'
            ,url:'answer/list'
            ,page:true
            ,limit:6
            ,limits:[4,6,8,10]
            ,cols:[[
                {field:'id',title:'编号',sort:true}
                ,{field:'questionTitle',title:'题目名称'}
                ,{field:'questionType',title:'题目类型'}
                ,{field:'questionAnswer',title:'题目答案',templet:function(d){
                    if (d.questionAnswer != null && d.questionAnswer != '') {
                        return d.questionAnswer + '：' + d.optionContent;
                    }else {
                        return '-';
                    }
                    }}
                ,{toolbar: '#barDemo', align:'center'}
            ]]
        });
        /**
         * 监听answerTable的查看编辑删除按钮的单击事件
         * */
        table.on('tool(answerTable)',function (obj) {
            var data = obj.data;
            //编辑按钮的单击事件
            if(obj.event=='edit'){
                form.val("amendAnswerForm",data);
                $.ajax({
                    url:'answer/queryOption',
                    data:{id:data.id},
                    type:"get",
                    dataType:"json",
                    success:function (result) {
                        if(result.code==200){
                            $("#optionA").prop('title', result.data.optionA);
                            $("#optionB").prop('title', result.data.optionB);
                            $("#optionC").prop('title', result.data.optionC);
                            $("#optionD").prop('title', result.data.optionD);
                            switch (result.data.answer) {
                                case "A" : $("#optionA").prop('checked',true); break;
                                case "B" : $("#optionB").prop('checked',true); break;
                                case "C" : $("#optionC").prop('checked',true); break;
                                case "D" : $("#optionD").prop('checked',true); break;
                            }
                            form.render('radio');
                        }
                    }
                });
                layer.open({
                    type:1,
                    title:['编辑答案信息','font-size:18px;color:orange;'],
                    area:['760px'],
                    content:$("#amendAnswerForm"),
                });
            }
        });

        /**
         * 监听修改页面的确认修改按钮
         * */
        form.on("submit(amendAnswerSubmit)",function (obj) {
            if ($("#optionA").prop('checked') == false &&
                $("#optionB").prop('checked') == false &&
                $("#optionC").prop('checked') == false &&
                $("#optionD").prop('checked') == false) {
                layer.msg("请选择一个选项！",{icon:'2',title:'提示'});
            }else {
                layer.confirm("你确定要修改吗？",{icon:'3',title:'提示'},function () {
                    $.ajax({
                        url:'answer/update',
                        data:obj.field,
                        type:"put",
                        dataType:"json",
                        success:function (data) {
                            if(data.code==200){
                                obj.form.reset();
                                layer.closeAll();
                                table.reload("answerTable");
                                layer.msg("修改答案成功！",{icon:'1',title:'提示'});
                            }
                        }
                    });
                })
            }

            return false;
        });
        /**
         * 各个页面的一些关闭按钮
         * */
        $("#closeAmendAnswer").click(function () {
            layer.closeAll();
        })
        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            if($("#value").val()==""){
                table.reload("answerTable",{
                    url:'answer/list',
                    page:{
                        curr:1
                    }
                });
            }else{
                table.reload("answerTable",{
                    url:'answer/search',
                    where:{
                        questionTitle:$("#value").val()
                    }
                });
            }
        });







    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

</body>
</html>